<template>
	<view class="info">
		<view class="navbar">
			<dwu-integral-navbar title="积分明细" bgColor="transparent"></dwu-integral-navbar>
		</view>
		<view class="info-type" @click="show = true">
			<text>全部明细</text>
			<image src="@/static/index/arrow_down.png" mode=""></image>
		</view>
		<scroll-view class="integral-list" scroll-y :style="'height:calc(100vh - '+ offsetTop +')'"
			@scrolltolower="scrolltolower">
			<view class="integral-date" v-for="(item,index) in integralList" :key="index">
				<view class="date" @click="integralShow[index] = !integralShow[index]">
					<text>{{index}}</text>
					<image :class="{hidden: !integralShow[index]}" src="@/static/index/arrow_down.png" mode=""></image>
				</view>
				<block v-if="integralShow[index]">
					<view class="integral-item" v-for="(itemm,indexx) in item" :key="indexx">
						<view class="left">
							<view class="icon">
								<image v-if="itemm.is_type == 2" src="@/static/integral/icon1.png" mode=""></image>
								<image v-if="itemm.is_type == 1" src="@/static/integral/icon2.png" mode=""></image>
								<image v-if="itemm.is_type == 0" src="@/static/integral/icon3.png" mode=""></image>
							</view>
							<view class="left-right">
								<view class="label">
									{{itemm.memo}}
								</view>
								<view class="time">
									{{itemm.createtime | formattingTime}}
								</view>
							</view>
						</view>
						<view class="right">
							<text>{{itemm.score}}</text>
						</view>
					</view>
				</block>
			</view>
		</scroll-view>
		<dwu-empty paddingTop="240rpx" image="/static/public/empty_icon1.png" imageW="234rpx" imageH="166rpx"
			tips="您当前暂无积分明细~" v-if="integralList.length == 0"></dwu-empty>
		<u-popup :show="show" mode="bottom" bgColor="transparent">
			<view class="modal-popup">
				<image class="popup-bg" src="@/static/integral/popup_bottom_bg.png" mode=""></image>
				<view class="modal-box">
					<view class="modal-title">
						<text>选择筛选项</text>
					</view>
					<view class="modal-content">
						<text class="type-title">积分类型</text>
						<view class="type-list">
							<view class="type-item" :class="current === '' ? 'active' : ''" @click="current = ''">
								全部
							</view>
							<view class="type-item" :class="current === 0 ? 'active' : ''" @click="current = 0">
								消费
							</view>
							<view class="type-item" :class="current === 1 ? 'active' : ''" @click="current = 1">
								评价
							</view>
							<view class="type-item" :class="current === 2 ? 'active' : ''" @click="current = 2">
								充值
							</view>
						</view>
					</view>
					<view class="modal-btns">
						<view class="modal-cancel" @click="close">
							取消
						</view>
						<view class="modal-submit" @click="submit">
							确定
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				integralList: [],
				page: 1,
				pageSize: 10,
				flag: false,
				show: false,
				current: '',
				offsetTop: 0,
				integralShow: {}
			};
		},
		onShow() {
			this.getHeight()
		},
		onLoad() {
			this.getIntegralList()
		},
		methods: {
			getHeight() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.navbar').boundingClientRect(data => {
					if (data) {
						this.offsetTop = ((data.height * 2) + 120) + 'rpx'
						this.$forceUpdate()
					}
				}).exec();
			},
			scrolltolower() {
				if (this.flag) return
				this.page++
				this.flag = true
				// this.getIntegralList(true)
			},
			close() {
				this.show = false
			},
			submit() {
				this.show = false
				this.getIntegralList()
			},
			getIntegralList(next) {
				this.request.http('/Moneyorder/index', 'post', {
					is_type: this.current,
				}).then(res => {
					let data = res.data
					if (data.code == 1) {
						if (next) {
							if (data.data.length > 0) {
								this.integralList = this.integralList.concat(data.data)
								this.flag = false
							}
						} else {
							// this.integralList = data.data.data
							let integralList = data.data
							let integralShow = {}
							for (let key in integralList) {
								integralShow[key] = true
							}
							this.integralShow = integralShow
							this.integralList = integralList
							this.flag = false
						}
					}
				})
			},
		}

	}
</script>

<style lang="less">
	page {
		background-color: #F7F9F9;
	}

	.info {
		.info-type {
			margin: 26rpx 0 26rpx 34rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 190rpx;
			height: 67rpx;
			background: rgba(216, 216, 216, 0.25);
			border-radius: 34rpx;

			text {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 23rpx;
				color: #474747;
			}

			image {
				margin-left: 10rpx;
				width: 12rpx;
				height: 10rpx;
			}
		}

		.integral-list {
			padding: 23rpx;

			.integral-date {
				.date {
					padding-left: 13rpx;
					display: flex;
					align-items: center;

					text {
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						font-size: 27rpx;
						color: #474747;
					}

					image {
						margin-left: 10rpx;
						width: 10rpx;
						height: 10rpx;

						&.hidden {
							transform: rotateZ(180deg);
						}
					}

				}
			}

			// height: calc(100vh - 282rpx - 66rpx - 130rpx);

			.integral-item {
				position: relative;
				width: 100%;
				height: 154rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background: #FFFFFF;
				box-shadow: 0rpx 4rpx 13rpx 8rpx rgba(245, 245, 245, 0.16);
				border-radius: 35rpx;
				margin: 20rpx 0;

				// .item-bg {
				// 	position: absolute;
				// 	z-index: 1;
				// 	width: 100%;
				// 	height: 100%;
				// 	top: 0;
				// 	left: 0;
				// }

				.left {
					padding-left: 32rpx;
					position: relative;
					z-index: 10;
					display: flex;
					align-items: center;

					.icon {
						margin-right: 40rpx;
						width: 77rpx;
						height: 77rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.left-right {
						display: flex;
						justify-content: center;
						flex-direction: column;

					}

					.label {
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 27rpx;
						color: #474747;
						line-height: 38rpx;
					}

					.time {
						margin-top: 12rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 23rpx;
						color: #868686;
						line-height: 33rpx;
					}
				}

				.right {
					padding-right: 51rpx;
					position: relative;
					z-index: 10;

					text {
						font-family: DINCondensed, DINCondensed;
						font-weight: bold;
						font-size: 50rpx;
						color: #474747;
						line-height: 60rpx;
						// &:first-child {
						// 	font-family: DINCondensed, DINCondensed;
						// 	font-weight: bold;
						// 	font-size: 46rpx;
						// 	color: #474747;
						// }

						// &:last-child {
						// 	font-family: DINCondensed, DINCondensed;
						// 	font-weight: bold;
						// 	font-size: 50rpx;
						// 	color: #474747;
						// }
					}
				}
			}
		}

		.modal-popup {
			position: relative;
			width: 100%;
			height: 620rpx;
			padding: 62rpx 44rpx 70rpx;

			.popup-bg {
				position: absolute;
				z-index: 1;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}

			.modal-box {
				position: relative;
				z-index: 10;

				.modal-title {
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 31rpx;
					color: #313131;
				}

				.modal-content {
					margin-top: 30rpx;

					.type-title {
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 27rpx;
						color: #666666;
					}

					.type-list {
						margin-top: 16rpx;
						display: flex;
						align-items: center;
						flex-wrap: wrap;

						.type-item {
							margin-right: 44rpx;
							margin-bottom: 16rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							padding: 0 66rpx;
							height: 75rpx;
							background: rgba(246, 247, 251, 0.73);
							border-radius: 19rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 27rpx;
							color: #333333;
							border: 1px solid rgba(246, 247, 251, 0.73);

							&:nth-child(3n) {
								margin-right: 0;
							}

							&.active {
								border-color: #B0DD67;
							}
						}
					}


				}

				.modal-btns {
					margin-top: 60rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					.modal-cancel,
					.modal-submit {
						width: 254rpx;
						height: 106rpx;
						box-shadow: 0rpx 4rpx 13rpx 8rpx rgba(245, 245, 245, 0.16);
						border-radius: 40rpx;
						text-align: center;
						line-height: 106rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						font-size: 27rpx;
					}

					.modal-cancel {
						margin-right: 88rpx;
						color: #666666;
						border: 1px solid #E6E6E6;
					}

					.modal-submit {
						color: #B0DD67;
						background: #3D3D3D;
					}
				}
			}
		}
	}
</style>